<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layuiAdmin 主页示例模板二</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script type="text/javascript" src="../../js/echarts.js"></script>
   <script src="../../layui/src/layuiadmin/layui/layui.js"></script>
   <script type="text/javascript" src="../../js/jquery-3.4.1.min.js"></script>
  <link rel="stylesheet" href="../../layui/src/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../layui/src/layuiadmin/style/admin.css" media="all">
</head>
<body>

  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      
      <div class="layui-col-sm6 layui-col-md3">
        <div class="layui-card">
          <div class="layui-card-header">
            访问量
            <span class="layui-badge layui-bg-blue layuiadmin-badge">周</span>
          </div>
          <div class="layui-card-body layuiadmin-card-list">
            <p class="layuiadmin-big-font">9,999,666</p>
            <p>
              总计访问量 
              <span class="layuiadmin-span-color">88万 <i class="layui-inline layui-icon layui-icon-flag"></i></span>
            </p>
          </div>
        </div>
      </div>
      <div class="layui-col-sm6 layui-col-md3">
        <div class="layui-card">
          <div class="layui-card-header">
            下载
            <span class="layui-badge layui-bg-cyan layuiadmin-badge">月</span>
          </div>
          <div class="layui-card-body layuiadmin-card-list">
            <p class="layuiadmin-big-font">33,555</p>
            <p>
              新下载 
              <span class="layuiadmin-span-color">10% <i class="layui-inline layui-icon layui-icon-face-smile-b"></i></span>
            </p>
          </div>
        </div>
      </div>
      <div class="layui-col-sm6 layui-col-md3">
        <div class="layui-card">
          <div class="layui-card-header">
            收入
            <span class="layui-badge layui-bg-green layuiadmin-badge">年</span>
          </div>
          <div class="layui-card-body layuiadmin-card-list">

            <p class="layuiadmin-big-font">999,666</p>
            <p>
              总收入 
              <span class="layuiadmin-span-color">*** <i class="layui-inline layui-icon layui-icon-dollar"></i></span>
            </p>
          </div>
        </div>
      </div>
      <div class="layui-col-sm6 layui-col-md3">
        <div class="layui-card">
          <div class="layui-card-header">
            活跃用户
            <span class="layui-badge layui-bg-orange layuiadmin-badge">月</span>
          </div>
          <div class="layui-card-body layuiadmin-card-list">

            <p class="layuiadmin-big-font">66,666</p>
            <p>
              最近一个月 
              <span class="layuiadmin-span-color">15% <i class="layui-inline layui-icon layui-icon-user"></i></span>
            </p>
          </div>
        </div>
      </div>   
      <div class="layui-col-sm12">
        <div class="layui-card">
          <div class="layui-card-header">
            访问量
            <div class="layui-btn-group layuiadmin-btn-group">
              <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-xs">去年</a>
              <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-xs">今年</a>
            </div>
          </div>
          <div class="layui-card-body">
            <div class="layui-row">
              <div class="layui-col-sm8">
                
                
                <!-- 借书还书统计 -->

<div id="chartmain" style="width:1000px; height: 400px;"></div>    
    <script type="text/javascript">
      //初始化echarts实例
    var myChart = echarts.init(document.getElementById('chartmain'));        
    //设置图标配置项
    myChart.setOption({
        title:{
            text:'借书还书表'
        },
        tooltip:{},
        legend:{
            data:['借书','还书']
        },
        xAxis:{
            data:[]
        },
        yAxis:{},
        series:[
            {
                name:'借书',
                type:'bar',
                data:[]
            }, {
                name:'还书',
                type:'bar',
                data:[]
            }
        ]
    })
        $.ajax({
             url:"/queryBar",
             data:{},
             dataType:"json",
             type:"post",
             success:function(res){
                  myChart.setOption({                
                      xAxis:{
                          data:res.name
                      },                
                      series:[
                          {    
                              //根据名字对应到相应的系列
                              name:"借书",
                              data:res.borrow
                          },{    
                              //根据名字对应到相应的系列
                              name:"还书",
                              data:res.given
                          }
                      ]
                  })
                 }
            })
    </script>
                  
                  
                  
              </div>
              <div class="layui-col-sm4">
                <div class="layuiadmin-card-list">
                  <p class="layuiadmin-normal-font">月访问数</p>
                  <span>同上期增长</span>
                  <div class="layui-progress layui-progress-big" lay-showPercent="yes">
                    <div class="layui-progress-bar" lay-percent="30%"></div>
                  </div>
                </div>
                <div class="layuiadmin-card-list">
                  <p class="layuiadmin-normal-font">月下载数</p>
                  <span>同上期增长</span>
                  <div class="layui-progress layui-progress-big" lay-showPercent="yes">
                    <div class="layui-progress-bar" lay-percent="20%"></div>
                  </div>
                </div>
                <div class="layuiadmin-card-list">
                  <p class="layuiadmin-normal-font">月收入</p>
                  <span>同上期增长</span>
                  <div class="layui-progress layui-progress-big" lay-showPercent="yes">
                    <div class="layui-progress-bar" lay-percent="25%"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
        
      </div>
    </div>
  <script type="text/javascript">
  layui.config({
	    base: '../layui/src/layuiadmin/' //静态资源所在路径
	  }).extend({
	    index: 'lib/index' //主入口模块
	  }).use(['index', 'form', 'upload'], function(){
	    var $ = layui.$
	    ,form = layui.form
	    ,upload = layui.upload ;
	    
	    upload.render({
	      elem: '#layuiadmin-upload-useradmin'
	      ,url: layui.setter.base + 'json/upload/demo.js'
	      ,accept: 'images'
	      ,method: 'get'
	      ,acceptMime: 'image/*'
	      ,done: function(res){
	        $(this.item).prev("div").children("input").val(res.data.src)
	      }
	    });
</html>